<template>
  <div class="big-show-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div style=""><span class="company-name">XXXX科技有限公司・</span><span class="system-name">XX云软系统</span></div>
      <div class="full-screen-btn"></div>
    </div>
    <!-- 主体内容区域，左右布局 -->
    <div class="main-content">
      <!-- 左侧统计区域 -->
      <div class="left-stats" v-show="!fullScreen">
        <div class="stat-card">
          <div class="stat-title">
            <span class="stat-name">统计1</span>
            <div class="time-tabs">
              <span class="tab active">本日</span>
              <span class="tab">上月</span>
              <span class="tab">本年</span>
            </div>
          </div>
          <!-- 这里用 ECharts 示例 -->
          <div class="chart" ref="myChart"></div>
        </div>
        <div class="stat-card">
          <div class="stat-title">
            <span class="stat-name">统计2</span>
            <div class="time-tabs">
              <span class="tab active">本日</span>
              <span class="tab">上月</span>
              <span class="tab">本年</span>
            </div>
          </div>
          <div class="chart" ref="myChart2"></div>
        </div>
        <div class="stat-card">
          <div class="stat-title">
            <span class="stat-name">统计3</span>
            <div class="time-tabs">
              <span class="tab active">本日</span>
              <span class="tab">上月</span>
              <span class="tab">本年</span>
            </div>
          </div>
          <div class="chart" ref="myChart3"></div>
        </div>
      </div>
      <!-- 中间背景区域 -->
      <div class="middle-background">
        <!-- 中间区域可以放置核心内容或装饰 -->
        <div class="middle-content">
          <h2>系统监控中心</h2>
          <p>实时数据总览</p>
        </div>
      </div>
      <!-- 右侧统计区域 -->
      <div class="right-stats" v-show="!fullScreen">
        <div class="stat-card">
          <div class="stat-title">
            <span class="stat-name">统计4</span>
            <div class="time-tabs">
              <span class="tab active">本日</span>
              <span class="tab">上月</span>
              <span class="tab">本年</span>
            </div>
          </div>
          <div class="chart" ref="myChart4"></div>
        </div>
        <div class="stat-card">
          <div class="stat-title">
            <span class="stat-name">统计5</span>
            <div class="time-tabs">
              <span class="tab active">本日</span>
              <span class="tab">上月</span>
              <span class="tab">本年</span>
            </div>
          </div>
          <div class="chart" ref="myChart5"></div>
        </div>
        <div class="stat-card">
          <div class="stat-title">
            <span class="stat-name">统计6</span>
            <div class="time-tabs">
              <span class="tab active">本日</span>
              <span class="tab">上月</span>
              <span class="tab">本年</span>
            </div>
          </div>
          <!-- <div class="chart" id="chart6"></div> -->
        </div>
      </div>
    </div>
    <!-- 底部操作栏 -->
    <div class="footer">
      <label class="checkbox-label">
        <div class="bqs" @click="handleWarning">
          <img :src="warning ? selectVisition : noVisition" /> <span style="margin-left: 5px;">警告信息</span>
        </div>
      </label>
      <label class="checkbox-label">
        <div class="bqs" @click="handleFullScreen">
          <img :src="fullScreen ? selectVisition : noVisition" /> <span style="margin-left: 5px;">全屏显示</span>
        </div>
      </label>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BigShow',
  data() {
    return {
      msg: '',
      noVisition: new URL("../../assets/demoUI/imgs/xuankuang-0.png", import.meta.url).href,
      selectVisition: new URL("../../assets/demoUI/imgs/xuankuang-1.png", import.meta.url).href,
      fullScreen: false,
      warning: false,
      sex_data: {
                title: "性别占比",
                name: "性别",
                data: []
            },
            grade_data: {
                title: "年级统计",
                name: ["年级"],
                gradeList: [],
                xAxisList: [],
            },
            bills_data: {
                title: "商品单位统计",
                name: ["单位"],
                data: [],
            },
            billsUnit_data: {
                title: "商品统计（根据商品单位）",
                name: ["商品名称"],
                productCountList: [],
                productUnitList: [],
                totalPriceList: [],
                productCountUnitList: []
            },
    };
  },
  mounted() {
    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', this.handleResize);
     this.initChart();
        this.initChart2();
        this.initChart3();
        this.initChart4();
        this.getSexStatistics();
        this.getGradeStatistics();
        this.getBillsStatistics();
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {

    handleWarning() {
      this.warning = !this.warning;
    },

    handleFullScreen() {
      this.fullScreen = !this.fullScreen;
      if (this.fullScreen) {
        document.documentElement.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    },

    // 初始化 ECharts 图表
 getBillsStatistics() {
            let bills_list = []
            this.$axios.get('http://127.0.0.1:8082/statistics/getBillsStatistics')
                .then(response => {
                    console.log("bills_data!!!!:", response.data.data)
                    bills_list = response.data.data
                    for (var i = 0; i < bills_list.length; i++) {
                        let item = {
                            value: bills_list[i].productUnitCount,
                            name: bills_list[i].productUnit,
                        }
                        this.bills_data.data.push(item)
                    }
                    for (var j = 0; j < bills_list.length; j++) {
                        this.billsUnit_data.productCountList.push(bills_list[j].productCount)
                        this.billsUnit_data.productUnitList.push(bills_list[j].productUnit)
                        this.billsUnit_data.totalPriceList.push(bills_list[j].totalPrice)
                        this.billsUnit_data.productCountUnitList.push(bills_list[j].productUnitCount)
                    }
                    console.log("bills_data:", this.bills_data)
                    this.initChart3();
                    this.initChart4();
                    this.initChart5();
                    console.log("billsUnit_data:", this.billsUnit_data)
                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        getGradeStatistics() {
            let grade_list = []
            this.$axios.get('http://127.0.0.1:8082/statistics/getGradeStatistics')
                .then(response => {
                    console.log("grade_data:", response.data.data)
                    grade_list = response.data.data
                    for (var i = 0; i < grade_list.length; i++) {
                        this.grade_data.xAxisList.push(grade_list[i].gradeName)
                        this.grade_data.gradeList.push(grade_list[i].stuCount)
                    }
                    this.initChart();
                    console.log("grade_data:", this.grade_data)
                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        getSexStatistics() {
            let sex_list = []
            let sex_list_new = []
            this.$axios.get('http://127.0.0.1:8082/statistics/getSexStatistics')
                .then(response => {
                    sex_list = response.data.data
                    for (var i = 0; i < sex_list.length; i++) {
                        let item = {
                            value: sex_list[i].stuCount,
                            name: sex_list[i].sex == true ? "男" : "女",
                        }
                        sex_list_new.push(item)
                    }
                    console.log("sex_data:", this.sex_data)
                    this.sex_data.data = sex_list_new;
                    this.initChart2();

                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        initChart() {
            let myChart = echarts.init(this.$refs.myChart);
            let option = {
                title: {
                    text: this.grade_data.title,
                },
                tooltip: {},
                legend: {
                    data: this.grade_data.name,
                },
                xAxis: {
                    data: this.grade_data.xAxisList,
                },
                yAxis: {},
                series: [
                    {
                        name: this.grade_data.name,
                        type: "bar",
                        data: this.grade_data.gradeList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                ],
            };
            myChart.setOption(option);
        },

        initChart2() {
            let myChart = echarts.init(this.$refs.myChart2);
            let option = {
                title: {
                    text: this.sex_data.title,
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: 10,
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 30,
                    textStyle: {
                        color: "#405B84",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "10%",
                    containLabel: true,
                },
                color: ["#68A0F7", "#64DEF3", "#40CE66", "#F87F4C"],
                series: [
                    {
                        name: this.sex_data.name,
                        type: "pie",
                        label: {
                            color: "#405B84",
                            formatter: "{b}: {d}%",
                        },
                        data: this.sex_data.data,
                        radius: "65%",
                    },
                ],
            };
            myChart.setOption(option);
        },



        initChart3() {
            let myChart = echarts.init(this.$refs.myChart3);
            const option = {
                title: {
                    text: this.bills_data.title,
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: 10,
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 30,
                    textStyle: {
                        color: "#405B84",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "10%",
                    containLabel: true,
                },
                color: ["#68A0F7", "#64DEF3", "#40CE66", "#F87F4C"],
                series: [
                    {
                        name: this.bills_data.name,
                        type: "pie",
                        label: {
                            color: "#405B84",
                            formatter: "{b}: {d}%",
                        },
                        data: this.bills_data.data,
                        radius: ["50%", "70%"],
                    },
                ],
            };
            myChart.setOption(option);
        },
        initChart4() {
            let myChart = echarts.init(this.$refs.myChart4);
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: this.billsUnit_data.title,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.billsUnit_data.name,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.billsUnit_data.productUnitList, // x轴数据
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "总条数",
                        type: "line", // 指定为折线图类型
                        stack: "总量", // 堆叠名称，用于堆叠显示数据
                        data: this.billsUnit_data.productCountList, // 数据数组，对应 xAxis 的类目数组长度
                    },
                    {
                        name: "金额",
                        type: "line", // 指定为折线图类型
                        stack: "总额", // 堆叠名称，用于堆叠显示数据
                        data: this.billsUnit_data.totalPriceList, // 数据数组，对应 xAxis 的类目数组长度
                    },
                    {
                        name: "总数量",
                        type: "line", // 指定为折线图类型
                        stack: "总数", // 堆叠名称，用于堆叠显示数据
                        data: this.billsUnit_data.productCountUnitList, // 数据数组，对应 xAxis 的类目数组长度
                    },
                ],

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        initChart5() {
            let myChart = echarts.init(this.$refs.myChart5);
            let option = {
                title: {
                    text: this.billsUnit_data.title,
                },
                tooltip: {},
                legend: {
                    data: this.billsUnit_data.name,
                },
                xAxis: {
                    data: this.billsUnit_data.productUnitList,
                },
                yAxis: {},
                series: [
                    {
                        name: "总条数",
                        type: "bar",
                        data: this.billsUnit_data.productCountList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                    {
                        name: "总数量",
                        type: "bar",
                        data: this.billsUnit_data.productCountUnitList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                    {
                        name: "总金额",
                        type: "bar",
                        data: this.billsUnit_data.totalPriceList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                ],
            };
            myChart.setOption(option);
        },
  }
};
</script>

<style scoped>
/* 容器样式 */
.big-show-container {
  width: 95.3vw;
  height: 84.5vh;
  background-color: #000814;
  /* 深色背景 */
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* 图表容器样式 */
.chart {
  width: 100%;
  margin-left: 0 auto;
  /* height: 100px; */
  flex: 1;
  min-height: 0;
}

/* 顶部标题栏 */
.header {
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(to right, #003366, #006699);
  background-image: url(../../assets/demoUI/imgs/screen_head.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header .company-name {
  margin-left: 20px;
  color: #fff;
  font-weight: 400;
}

.header .system-name {
  margin-right: 20px;
  color: #2a90c3;
  font-weight: 400;
  font-family: "仿宋";
}

.full-screen-btn {
  float: right;

  background-image: url("../../assets/demoUI/imgs/quanping.png");
  background-repeat: no-repeat;
  /* 防止图片重复 */
  background-size: contain;
  /* 使图片适应元素尺寸 */
  width: 30px;
  /* 设置一个宽度 */
  height: 30px;
  /* 设置一个高度 */
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 25px;
}

/* 主体内容区域：左右布局 + 中间背景 */
.main-content {
  display: flex;
  height: calc(100% - 60px - 40px);
  /* 减去头部和底部高度 */
}

.left-stats,
.right-stats {
  width: 25%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.middle-background {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0a1929;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.middle-content {
  text-align: center;
  padding: 20px;
  border: 1px solid rgba(72, 190, 254, 0.3);
  border-radius: 8px;
  background-color: rgba(10, 25, 41, 0.5);
}

/* 统计卡片样式 */
.stat-card {
  background: rgba(10, 25, 41, 0.5);
  border: 1px solid rgba(72, 190, 254, 0.3);
  border-radius: 8px;
  margin-bottom: 10px;
  /* padding: 10px; */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 18px;
  margin-bottom: 10px;
  margin-left: 0;
  background-image: url("../../assets/demoUI/imgs/part_title-ac.png");
  background-size: 100% 110%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #48befe;
}

.stat-name {
  margin-left: 15px;
}

.time-tabs .tab {
  margin-left: 10px;
  cursor: pointer;
  padding: 2px 6px;
  color: #fff;
  background-image: url("../../assets/demoUI/imgs/part_button.png");
  background-size: 100% 90%;
  background-repeat: no-repeat;
  font-size: 14px;

}

.time-tabs .tab.active {

  background-image: url("../../assets/demoUI/imgs/part_button_ac.png");
  background-size: 100% 90%;
  background-repeat: no-repeat;
}



/* 底部操作栏 */
.footer {
  height: 50px;
  line-height: 40px;
  text-align: center;
  /* background: linear-gradient(to right, #003366, #006699); */
  background-image: url(../../assets/demoUI/imgs/footerBack.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bqs {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgb(49, 215, 221);
  font-size: 13px;
  font-weight: bolder;
  position: relative;
  top: 2px;
}

.checkbox-label {
  margin: 0 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-icon {
  display: inline-block;
  width: 16px;
  height: 16px;

  background-size: 100% 100%;
  margin-right: 5px;
  position: relative;
}

.checkbox-icon::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 8px;
  height: 12px;
  border: solid #48befe;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type='checkbox']:checked+.checkbox-icon::after {
  display: block;
}

input[type='checkbox'] {
  display: none;
}
</style>
